<div class="panel panel-default panel-intro">

    <!-- 功能板块操作提示栏 -->
    <div class="school-guide-panel"
        style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
        <div class="panel-header"
            style="padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: space-between; align-items: center;">
            <h4 style="margin: 0; font-weight: 600;"><i class="fa fa-users"></i> 学校项目管理模块操作指引</h4>
            <button class="btn btn-sm" id="toggleGuide"
                style="background: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 5px 10px;">
                <i class="fa fa-chevron-down"></i> 展开
            </button>
        </div>
        <div class="guide-content" id="guideContent" style="padding: 20px; display: none;">
            <!-- 当前步骤信息 -->
            <div class="current-step-info"
                style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 6px; margin-bottom: 20px;">
                <div style="display: flex; align-items: center; margin-bottom: 10px;">
                    <span class="step-badge"
                        style="background: #28a745; color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; margin-right: 10px;">当前步骤</span>
                    <h5 style="margin: 0; font-weight: 600;">第1步：基础信息录入</h5>
                </div>
                <p style="margin: 0; opacity: 0.9;">请在此页面完成学校当前所有班级的信息录入，包括班级名称、年级、人数等信息。</p>
            </div>

            <!-- 进度条 -->
            <div class="progress-container" style="margin-bottom: 20px;">
                <div class="progress"
                    style="height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden;">
                    <div class="progress-bar"
                        style="width: 25%; background: #28a745; height: 100%; transition: width 0.3s ease;"></div>
                </div>
                <div
                    style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; opacity: 0.8;">
                    <span>步骤 3/12</span>
                    <span>25% 完成</span>
                </div>
            </div>

            <!-- 操作步骤列表 -->
            <div class="steps-list"
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px;">
                <div class="step-item active"
                    style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 6px; border-left: 4px solid #28a745;">
                    <div style="display: flex; align-items: center; margin-bottom: 8px;">
                        <span class="step-number"
                            style="background: #28a745; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; margin-right: 10px;">1.3</span>
                        <strong>班级信息录入</strong>
                        <span class="current-badge"
                            style="background: #ffc107; color: #000; padding: 2px 8px; border-radius: 10px; font-size: 10px; margin-left: 10px;">当前</span>
                    </div>
                    <p style="margin: 0 0 10px 34px; font-size: 13px; opacity: 0.9;">在班级管理模块里完成学校当前所有班级的信息录入</p>
                    <button class="btn btn-sm btn-success"
                        onclick="window.top.location.href='/addresslv/addresslv?relType=cityarea&ref=addtabs'"
                        style="margin-left: 34px; padding: 4px 12px; font-size: 12px;">如果已完善，点击到下一步</button>
                </div>
            </div>
        </div>
    </div>

    {:build_heading()}

    <div class="panel-body">
        <!-- 工具栏 -->
        <div id="toolbar" class="toolbar" style="margin-bottom: 15px;">
            <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i
                    class="fa fa-refresh"></i> </a>
            <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('classes/classes/add')?'':'hide'}"
                title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
            <a href="javascript:;"
                class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('classes/classes/edit')?'':'hide'}"
                title="{:__('Edit')}"><i class="fa fa-pencil"></i> {:__('Edit')}</a>
            <a href="javascript:;"
                class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('classes/classes/del')?'':'hide'}"
                title="{:__('Delete')}"><i class="fa fa-trash"></i> {:__('Delete')}</a>

            <div class="dropdown btn-group {:$auth->check('classes/classes/multi')?'':'hide'}">
                <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i
                        class="fa fa-cog"></i> {:__('More')}</a>
                <ul class="dropdown-menu text-left" role="menu">
                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                            data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                            data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                </ul>
            </div>


            <div class="row cityschool">
                <div class="col-md-3">
                    <select id="c-cityarea_id" name="city_id" class="form-control select" data-live-search="true"
                        title="选择城市">
                        <option value="">全部城市</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select id="c-school_id" name="school_id" class="form-control select" data-live-search="true"
                        title="选择学校">
                        <option value="">全部学校</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-info btn-filter" id="btn-filter">
                        <i class="fa fa-search"></i> 筛选
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 主选项卡：学校班级/社区班级/校外班级 -->
    <ul class="nav nav-tabs" id="mainClassTab">
        <li class="active school-tab-li"><a href="#schoolTab" data-toggle="tab" data-reltype="1">学校班级</a></li>
        <li class="community-tab-li"><a href="#communityTab" data-toggle="tab" data-reltype="2">社区班级</a></li>
        <li class="external-tab-li"><a href="#externalTab" data-toggle="tab" data-reltype="3">校外班级</a></li>
    </ul>
    <div class="tab-content" style="margin-top:15px;">

        <div class="tab-pane fade in active school-tab-content" id="schoolTab">
            <!-- 二级tab -->
            <!-- 学校班级切换控制器 - 完全按照event-toggle-controller样式 -->
            <div id="school-class-toggle-controller"
                style="padding: 10px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #dee2e6;">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-secondary btn-sm toggle-all" data-type="all"
                        data-classstatus="all">
                        <i class="fa fa-list"></i> 全部班级
                    </button>
                    <button type="button" class="btn btn-primary btn-sm toggle-ongoing active" data-type="ongoing"
                        data-classstatus="1">
                        <i class="fa fa-play-circle"></i> 正在进行中
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm toggle-ended" data-type="ended"
                        data-classstatus="0">
                        <i class="fa fa-stop-circle"></i> 已经结束
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm toggle-unscheduled"
                        data-type="unscheduled" data-classstatus="unscheduled">
                        <i class="fa fa-calendar-times-o"></i> 未排课的班级
                    </button>
                </div>
                <span class="ml-3 text-muted small">
                    <i class="fa fa-info-circle"></i> 点击切换查看不同状态的班级
                </span>
            </div>
            <div class="tab-content">
                <div class="tab-pane fade" id="schoolAll">
                    <!-- 全部班级表格区域 -->
                    <div id="schoolAllTableContainer">
                        <table id="schoolAllTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade in active" id="schoolOngoing">
                    <!-- 表格区域 -->
                    <div id="schoolOngoingTableContainer">
                        <table id="schoolOngoingTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="schoolEnded">
                    <div id="schoolEndedTableContainer">
                        <table id="schoolEndedTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="schoolUnscheduled">
                    <!-- 未排课班级表格区域 -->
                    <div id="schoolUnscheduledTableContainer">
                        <table id="schoolUnscheduledTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade community-tab-content" id="communityTab">
            <!-- 社区班级切换控制器 - 完全按照event-toggle-controller样式 -->
            <div id="community-class-toggle-controller"
                style="margin-bottom: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #dee2e6;">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-secondary btn-sm toggle-all" data-type="all"
                        data-classstatus="all">
                        <i class="fa fa-list"></i> 全部班级
                    </button>
                    <button type="button" class="btn btn-primary btn-sm toggle-ongoing active" data-type="ongoing"
                        data-classstatus="1">
                        <i class="fa fa-play-circle"></i> 正在进行中
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm toggle-ended" data-type="ended"
                        data-classstatus="0">
                        <i class="fa fa-stop-circle"></i> 已经结束
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm toggle-unscheduled"
                        data-type="unscheduled" data-classstatus="unscheduled">
                        <i class="fa fa-calendar-times-o"></i> 未排课的班级
                    </button>
                </div>
                <span class="ml-3 text-muted small">
                    <i class="fa fa-info-circle"></i> 点击切换查看不同状态的班级
                </span>
            </div>
            <div class="tab-content" style="margin-top:10px;">
                <div class="tab-pane fade" id="communityAll">
                    <!-- 全部班级表格区域 -->
                    <div id="communityAllTableContainer">
                        <table id="communityAllTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade in active" id="communityOngoing">
                    <div id="communityOngoingTableContainer">
                        <table id="communityOngoingTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="communityEnded">
                    <div id="communityEndedTableContainer">
                        <table id="communityEndedTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="communityUnscheduled">
                    <!-- 未排课班级表格区域 -->
                    <div id="communityUnscheduledTableContainer">
                        <table id="communityUnscheduledTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade external-tab-content" id="externalTab">
            <!-- 校外班级切换控制器 - 完全按照event-toggle-controller样式 -->
            <div id="external-class-toggle-controller"
                style="margin-bottom: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #dee2e6;">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-secondary btn-sm toggle-all" data-type="all"
                        data-classstatus="all">
                        <i class="fa fa-list"></i> 全部班级
                    </button>
                    <button type="button" class="btn btn-primary btn-sm toggle-ongoing active" data-type="ongoing"
                        data-classstatus="1">
                        <i class="fa fa-play-circle"></i> 正在进行中
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm toggle-ended" data-type="ended"
                        data-classstatus="0">
                        <i class="fa fa-stop-circle"></i> 已经结束
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm toggle-unscheduled"
                        data-type="unscheduled" data-classstatus="unscheduled">
                        <i class="fa fa-calendar-times-o"></i> 未排课的班级
                    </button>
                </div>
                <span class="ml-3 text-muted small">
                    <i class="fa fa-info-circle"></i> 点击切换查看不同状态的班级
                </span>
            </div>
            <div class="tab-content" style="margin-top:10px;">
                <div class="tab-pane fade" id="externalAll">
                    <!-- 全部班级表格区域 -->
                    <div id="externalAllTableContainer">
                        <table id="externalAllTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade in active" id="externalOngoing">
                    <div id="externalOngoingTableContainer">
                        <table id="externalOngoingTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="externalEnded">
                    <div id="externalEndedTableContainer">
                        <table id="externalEndedTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="externalUnscheduled">
                    <!-- 未排课班级表格区域 -->
                    <div id="externalUnscheduledTableContainer">
                        <table id="externalUnscheduledTable" class="table table-striped table-bordered table-hover"
                            data-operate-edit="{:$auth->check('classes/classes/edit')}"
                            data-operate-del="{:$auth->check('classes/classes/del')}" width="100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<style>
    /* 班级切换控制器样式 */
    .toggle-ongoing.active,
    .toggle-ended.active {
        box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
    }

    #school-class-toggle-controller .btn,
    #community-class-toggle-controller .btn {
        transition: all 0.2s ease;
    }

    #school-class-toggle-controller .btn:hover,
    #community-class-toggle-controller .btn:hover {
        transform: translateY(-1px);
    }

    /* 表格行高自动适应样式 - 覆盖bootstrap-table的固定高度 */
    .bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
    .bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
    .bootstrap-table .table:not(.table-condensed)>thead>tr>td,
    .bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
    .bootstrap-table .table:not(.table-condensed)>tfoot>tr>td {
        height: auto !important;
        min-height: auto !important;
        padding: 8px 15px !important;
        line-height: 1.4 !important;
        vertical-align: top !important;
    }

    .table tbody tr {
        height: auto !important;
        min-height: auto !important;
    }

    .table tbody tr td {
        height: auto !important;
        min-height: auto !important;
        vertical-align: top !important;
        padding: 8px !important;
        line-height: 1.4 !important;
    }

    /* 确保表格内容垂直对齐到顶部 */
    .table tbody tr td>* {
        vertical-align: top;
    }

    /* 优化图表容器 */
    .table tbody tr td div[id^="chart-"] {
        margin: 0 auto;
        display: block;
    }
</style>

<!-- 操作指引展开/收起功能已移至classes.js中，避免jQuery未加载的问题 -->